<template>
  <div class="header clearfix">
    <div class="top">
      <div class="box clearfix">{{$t('common.other.welcome')}}</div>
    </div>
    <div class="nav_box clearfix">
      <div class="box" v-if="nav.length>0">
        <span class="inbk" @click="jump('/index')"><img src="../assets/images/logo.png" alt=""></span>
        <span 
          v-for="(item, index) in nav" 
          :key="index" 
          @click="jump(item.path)" 
          :class="{'nava inbk': true, on: curPath.indexOf(item.path) > -1 }">
          {{item.name}}
        </span>
        <el-select class="lange" v-model="locale" @change="langeChange" >
          <el-option label="中文" value="zh_CN"></el-option>
          <el-option label="English" value="en_US"></el-option>
        </el-select>
        <div class="flex-rict cur" v-if='userInfo.name' @click="jumpInfo(userInfo.type)">
          {{$t('common.tips.Hello')}}，{{userInfo.name}}
          <div class="imgW tx-box rd50" v-if="userInfo.path.length>5"><img :src="userInfo.path" alt=""></div>
          <span class="exit" @click="exit()">{{$t('common.btn.exit')}}</span>
        </div>
        <div class="flex-rict" v-else>
          <el-button type="primary" size="mini" round @click="jump('/login')">{{$t('common.btn.login')}}</el-button>
          <el-button size="mini" class="register-btn" round @click="jump('/register')">{{$t('common.btn.register')}}</el-button>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
let log = console.log
import {loginOut} from '@/services/api.js'
import {jumpRout,ajaxAdd,showToast,showToastSuccess} from '@/utils/js.js'
export default {
  name:'Header',
  data(){
    return {
      curPath:'',
      Authorization:this.$store.state.Authorization,
      imgUrl:this.$store.state.imgUrl
    } 
  },
  computed:{
    userInfo() {
        const userInfo = this.$store.state.userInfo;
        return userInfo ? userInfo : "";
      },
    // 获取语言类型
    locale: {
      get() {
        return this.$store.state.locale;
      },
      set(val) {
        this.$store.state.locale = val;
      },
    },
    nav() {
      let data =[
        {name:this.$t('common.nav.home'),path:'/index'},
        {name:this.$t('common.nav.recruit'),path:'/c_recruit_list'},
        {name:this.$t('common.nav.policy'),path:'/policy'},
        {name:this.$t('common.nav.serve'),path:'/serve'},
        {name:this.$t('common.nav.cooperation'),path:'/cooperation'},
      ]
      return data
    },
  },
  mounted(){
    this.curPath = this.$route.path
    //log(this.$store.state.userInfo)
  },
  
  // ******************** methods开始 ***************** //
  methods:{
    exit(){
      this.$store.dispatch('exit','')
      ajaxAdd(this,loginOut,{},res=>{
        showToastSuccess(this,res.msg)
        this.$router.push('/index')
      },err=>{
        showToast(this,err.msg)
      })
    },
    //页面跳转事件
    jump(e){
      let curUrl = this.$route.path
      if(curUrl !== e){
        jumpRout(this,e,'',()=>{})
        this.curPath = e
      }
    },
    jumpInfo(e){
      if(e == 1){
        this.$router.push('/vip/c_recruit_companyInfo')
      }else{
        this.$router.push('/vip/p_policy')
      }
    },
    
    // 改变语言类型
    langeChange(val) {
      this.$store.dispatch("changeLan", val);
    }
  }
  // ******************** methods结束 ***************** //
}
</script>

<style lang="scss">
.header{background-color: #fff;}
  .tx-box{width:32px;height: 32px;background-color: #fafafa;
    margin-left:10px;
    img{width: 100%;height: 100%;object-fit: cover;}
  }
  .exit{color: #0F54BC;margin-left: 15px;}
  .top{color: #888;background-color: #f5f5f5;line-height: 36px;}
  .nav_box .box{display: flex;align-items: center;justify-content: space-between;}
  .nava{cursor: pointer;line-height: 72px;position: relative;padding:0 12px}
  .nava.on{color: #0F54BC;}
  .nava.on::after{position: absolute;width: 100%;height: 3px;background-color: #0F54BC;content: '';display: block;left: 0;bottom: 0;}
  .lange{
    .el-input__inner{width:80px;border: none;text-align: center;padding-left:0;}
  }
  .register-btn{border:none;box-shadow:0px 3px 6px rgba(102,102,102,0.1);}
</style>